<template>
  <div id="app">
    <div class="shop-content">
        <div class="shopmenu" v-for="list in shopmenu">
            <div class="shopbox"><img src="" width="100%" height="100%"></div>
            <div class="shoptext">
                <h3>{{ list.text }}</h3>
                <p>广西南宁市航海国际503</p>
                <p>0771-565653</p>
            </div>
        </div>
    </div>
    <router-link to="/addshop"><div class="btn">添加</div></router-link>
  </div>  
</template>

<script>
  export default {
      data: function () {
          return {
            shopmenu: [
              { text: '稻香-航洋店' },
              { text: '稻香-航洋店' },
              { text: '稻香-航洋店' }
            ]
          }
      }
  }
</script>

<style scoped>
  /* #app{
      position: sticky;
      min-height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #f6f6f6;
  } */
  .shopmenu{
      margin-bottom:0.75rem;
      border:1px #ddd solid;
      padding:0.75rem;
      border-radius:6px;
      display: flex;
      background: #fff;
  }
  .shop-content{
      padding:0.75rem;
  }
  .shopbox{
      width: 80px;
      height: 80px;
      border-radius: 100%;
  }
  .shopbox img{
      border-radius: 100%;
  }
  .shoptext{
      margin-left:0.75rem;
  }
  .shoptext h3{
      margin-bottom: 0.5rem;
  }
  .shoptext p{
      color:#999;
      margin-bottom: 0.3rem;
  }
  .btn{
      position: fixed;
      padding:0.75rem;
      bottom: 0;
      left: 0;
      right: 0;
      background: #3cb034;
      color:#fff;
      text-align: center;
      z-index: 1;
  }
</style>